<template>
  <view class="upload-receipt">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-bg"></view>
      <view class="header-content">
        <view class="page-title">上传支付回执</view>
        <view class="page-subtitle">请上传您的支付凭证</view>
      </view>
    </view>

    <view class="content-container">
      <!-- 订单信息 -->
      <view class="card order-info-card">
        <view class="card-header">
          <view class="header-left">
            <view class="icon-wrapper order-icon">
              <uni-icons type="list" size="20" color="#fff"></uni-icons>
            </view>
            <text class="card-title">订单信息</text>
          </view>
        </view>
        
        <view class="order-details">
          <view class="detail-item">
            <text class="detail-label">订单编号</text>
            <text class="detail-value">{{ orderId }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">支付方式</text>
            <text class="detail-value">银行转账</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">订单金额</text>
            <text class="detail-value amount">¥{{ orderAmount }}</text>
          </view>
        </view>
      </view>

      <!-- 上传区域 -->
      <view class="card upload-card">
        <view class="card-header">
          <view class="header-left">
            <view class="icon-wrapper upload-icon">
              <uni-icons type="camera" size="20" color="#fff"></uni-icons>
            </view>
            <text class="card-title">上传回执</text>
          </view>
        </view>
        
        <view class="upload-area">
          <view v-if="!receiptImage" class="upload-placeholder" @click="chooseImage">
            <view class="placeholder-icon">
              <uni-icons type="plus" size="60" color="#ddd"></uni-icons>
            </view>
            <text class="placeholder-text">点击上传支付回执</text>
            <text class="placeholder-desc">支持JPG、PNG格式，大小不超过5MB</text>
          </view>
          
          <view v-else class="uploaded-image">
            <image :src="receiptImage" mode="aspectFit" class="receipt-image"></image>
            <view class="image-actions">
              <button class="action-btn secondary" @click="chooseImage">
                <uni-icons type="refresh" size="16" color="#667eea"></uni-icons>
                <text>重新选择</text>
              </button>
              <button class="action-btn danger" @click="removeImage">
                <uni-icons type="trash" size="16" color="#fff"></uni-icons>
                <text>删除</text>
              </button>
            </view>
          </view>
        </view>
      </view>

      <!-- 提示信息 -->
      <view class="card tips-card">
        <view class="tips-content">
          <view class="tips-icon">
            <uni-icons type="info" size="20" color="#667eea"></uni-icons>
          </view>
          <view class="tips-text">
            <text class="tips-title">上传说明</text>
            <text class="tips-desc">请确保回执单信息清晰可见，包含转账金额、时间等关键信息</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="action-footer">
      <button class="action-btn secondary" @click="goBack">
        <text>取消</text>
      </button>
      <button 
        class="action-btn primary" 
        @click="submitReceipt"
        :disabled="!receiptImage || isUploading"
        :class="{ disabled: !receiptImage || isUploading }"
      >
        <view v-if="isUploading" class="loading-spinner"></view>
        <text>{{ isUploading ? '上传中...' : '提交回执' }}</text>
      </button>
    </view>
  </view>
</template>

<script>
import { uploadPaymentReceipt } from '@/api/order'

export default {
  data() {
    return {
      orderId: '',
      orderAmount: '0.00',
      receiptImage: '',
      isUploading: false
    }
  },
  
  onLoad(options) {
    this.orderId = options.orderId || ''
    this.orderAmount = options.amount || '0.00'
  },
  
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['camera', 'album'],
        success: (res) => {
          this.receiptImage = res.tempFilePaths[0]
        },
        fail: (error) => {
          uni.showToast({
            title: '选择图片失败',
            icon: 'none'
          })
        }
      })
    },
    
    removeImage() {
      this.receiptImage = ''
    },
    
    async submitReceipt() {
      if (!this.receiptImage) {
        uni.showToast({
          title: '请先选择回执图片',
          icon: 'none'
        })
        return
      }
      
      try {
        this.isUploading = true
        
        const response = await uploadPaymentReceipt(this.orderId, {
          receiptImage: this.receiptImage,
          paymentMethod: 'bank_transfer',
          orderAmount: this.orderAmount
        })
        
        if (response && response.data) {
          uni.showToast({
            title: '回执上传成功',
            icon: 'success'
          })
          
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }
      } catch (error) {
        uni.showToast({
          title: error.message || '上传失败，请重试',
          icon: 'none'
        })
      } finally {
        this.isUploading = false
      }
    },
    
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.upload-receipt {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
  padding-bottom: 140rpx;
}

/* 页面头部 */
.page-header {
  position: relative;
  height: 300rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.header-bg::after {
  content: '';
  position: absolute;
  bottom: -2rpx;
  left: 0;
  right: 0;
  height: 40rpx;
  background: #f8f9fa;
  border-radius: 40rpx 40rpx 0 0;
}

.header-content {
  position: relative;
  text-align: center;
  z-index: 2;
}

.page-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 12rpx;
}

.page-subtitle {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

/* 内容容器 */
.content-container {
  padding: 20rpx;
}

/* 卡片通用样式 */
.card {
  background: #fff;
  border-radius: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.header-left {
  display: flex;
  align-items: center;
}

.icon-wrapper {
  width: 56rpx;
  height: 56rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.order-icon {
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
}

.upload-icon {
  background: linear-gradient(135deg, #fdcb6e, #e17055);
}

.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #2c3e50;
}

/* 订单详情 */
.order-details {
  padding: 32rpx;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 2rpx solid #f8f9fa;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  font-size: 28rpx;
  color: #7f8c8d;
}

.detail-value {
  font-size: 28rpx;
  color: #2c3e50;
  font-weight: 500;
}

.detail-value.amount {
  color: #e74c3c;
  font-weight: 600;
  font-size: 32rpx;
}

/* 上传区域 */
.upload-area {
  padding: 32rpx;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400rpx;
  border: 4rpx dashed #e9ecef;
  border-radius: 16rpx;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.upload-placeholder:active {
  background: #e9ecef;
  border-color: #667eea;
}

.placeholder-icon {
  margin-bottom: 24rpx;
}

.placeholder-text {
  font-size: 28rpx;
  color: #6c757d;
  margin-bottom: 12rpx;
}

.placeholder-desc {
  font-size: 22rpx;
  color: #adb5bd;
}

.uploaded-image {
  text-align: center;
}

.receipt-image {
  width: 100%;
  max-height: 400rpx;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
}

.image-actions {
  display: flex;
  justify-content: center;
  gap: 16rpx;
}

/* 提示信息 */
.tips-content {
  display: flex;
  align-items: flex-start;
  padding: 32rpx;
}

.tips-icon {
  margin-right: 20rpx;
  margin-top: 4rpx;
}

.tips-text {
  flex: 1;
}

.tips-title {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8rpx;
}

.tips-desc {
  font-size: 24rpx;
  color: #7f8c8d;
  line-height: 1.5;
}

/* 底部操作栏 */
.action-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 24rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 16rpx;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 24rpx;
  border-radius: 24rpx;
  font-size: 28rpx;
  font-weight: 600;
  border: none;
  transition: all 0.3s ease;
}

.action-btn.primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}

.action-btn.secondary {
  background: #f8f9fa;
  color: #6c757d;
  border: 2rpx solid #e9ecef;
}

.action-btn.danger {
  background: linear-gradient(135deg, #ff7675, #d63031);
  color: #fff;
}

.action-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.action-btn:active {
  transform: scale(0.98);
}

.loading-spinner {
  width: 24rpx;
  height: 24rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  border-top: 2rpx solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style> 